<template>
  <div v-if="process == '选择审查项目'">
    关键字:
    <el-input
      v-model="data.params.projectName"
      placeholder="项目名称/编号"
      @keyup.enter="search"
      style="width: 200px; margin-right: 15px"
    />
    <el-button class="ordinary" @click="search()">搜索</el-button>
    <Table
      :height="350"
      :hasOperate="true"
      :loading="data.isLoading"
      :table-arr="data.allTableData"
      :columns="data.columns"
      :page-size="data.params.size"
      :page-num="data.params.current"
      @selectList="getCurrentList"
    >
    </Table>
    <div class="example-pagination-block">
      <el-pagination
        background
        layout="prev, pager, next ,total,sizes,jumper"
        :total="data.total"
        :page-size="data.params.size"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
  <div v-if="process == '审查下发'">
    <el-form
      ref="examineForm"
      :model="form"
      label-position="right"
      label-width="120px"
      :inline="false"
      :rules="rules"
    >
      <el-form-item label="截止上报时间：" required prop="reportTime">
        <el-date-picker
          v-model="form.reportTime"
          value-format="YYYY-MM-DD"
          type="date"
          placeholder="选择日期"
          clearable
        />
      </el-form-item>
      <el-form-item label="审查内容：" required prop="releaseContent">
        <el-input
          maxlength="512"
          show-word-limit
          v-model="form.releaseContent"
          type="textarea"
          :rows="7"
        />
      </el-form-item>
      <el-form-item label="附件:" style="width: 100%">
        <el-upload
          ref="uploadRef"
          :limit="5"
          :headers="headers"
          action="/fastDfs/file/upload"
          :on-success="handleAttachment"
          :on-preview="previewFile"
          :on-remove="removeAttachment"
          :on-exceed="handleExceed"
          :on-error="handleError"
        >
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, watch } from 'vue'
import Table from '../../../components/table2/table.vue'
import tableData from './tableHeader.json'
import { getProjectList } from '../../../api/project'
import { ElMessage } from 'element-plus'

export default defineComponent({
  components: {
    Table,
  },
  props: {
    examineProcess: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const examineForm = ref()
    let data = reactive({
      params: {
        current: 1,
        size: 10,
        projectName: '',
        level: '',
        createOrgId: '',
        projectCategory: '',
        projectStatus:'0'
      },
      isLoading: false,
      allTableData: [],
      total: 0,
      columns: tableData.platformTableHeader,
      currentList: [{}],
      ids: [],
      filePathArray: [] as any,
      fileNameArray: [] as any,
    })
    const rules = reactive({
      reportTime: { required: true, message: '请选择截止上报时间' },
      releaseContent: { required: true, message: '请填写审查内容' },
    })
    const form = reactive({
      projectName: '',
      projectCategory: '',
      projectCategoryName: '',
      projectNumber: '',
      projectLeader: '',
      projectType: '',
      projectLeaderName: '',
      affiliatedUnit: '',
      startTime: '',
      endTime: '',
      reportTime: '',
      releaseContent: '',
      fileName: '',
      filePath: '',
      status: '0',
    })
    let process = ref(props.examineProcess)
    watch(
      () => props.examineProcess,
      () => {
        console.log(props.examineProcess, 'props.examineProcess')
        process.value = props.examineProcess
      },
      {
        immediate: true,
      }
    )
    const onSearch = async () => {
      data.isLoading = true
      getProjectList(data.params).then((res) => {
        data.isLoading = false
        let records = res.data.data.records
        // records = records.filter((item) => {
        //   return item.projectStatus == 0
        // })
        data.allTableData = records
        data.total = res.data.data.total
      })
    }
    const search = () => {
      data.params.current = 1
      console.log(data.params)
      onSearch()
    }
    const hasChoose = () => {
      return new Promise((resolve) => {
        if (data.ids.length > 0) {
          resolve(true)
        } else {
          resolve(false)
        }
      })
    }
    const getCurrentList = (currentList) => {
      console.log(currentList, 'getCurrentList')
      data.currentList = currentList
      data.ids = currentList.map((item) => {
        return item.id
      })
    }
    onSearch()
    //改变页码
    const handleCurrentChange = (e) => {
      console.log(e, 'handleCurrentChange')
      data.params.current = e
      onSearch()
    }
    //改变页数限制
    const handleSizeChange = (e) => {
      console.log(e, 'handleSizeChange')
      data.params.size = e
      onSearch()
    }
    const getExamineParams = () => {
      return new Promise((resolve, reject) => {
        examineForm.value.validate((valid) => {
          console.log(valid, 'valid')
          if (valid) {
            console.log(data.currentList, 'data.currentList')
            let examineData = data.currentList.map((item) => {
              let obj = JSON.parse(JSON.stringify(form))
              for (let key in obj) {
                if (item[key]) {
                  obj[key] = item[key]
                  console.log(obj[key], 'obj[key]')
                }
              }
              return obj
            })
            console.log(examineData, 'examineData')
            resolve(examineData)
          } else {
            ElMessage({
              message: '请将基本信息补充完整',
              type: 'warning',
            })
            reject('校验失败')
          }
        })
      })
    }
    const previewFile = (uploadFile) => {
      console.log(uploadFile, 'uploadFile')
      window.open(uploadFile.response.data.path)
    }
    const handleAttachment = (uploadFile) => {
      if (uploadFile.code == 200) {
        ElMessage({
          message: '上传成功',
          type: 'success',
        })
        data.filePathArray.push(uploadFile.data.path)
        data.fileNameArray.push(uploadFile.data.fileName)
        form.filePath = JSON.stringify(data.filePathArray)
        form.fileName = JSON.stringify(data.fileNameArray)
      } else {
        ElMessage({
          message: '上传失败',
          type: 'error',
        })
      }
    }
    const removeAttachment = (file, uploadFiles) => {
      console.log(uploadFiles, 'uploadFiles')
      data.filePathArray = uploadFiles.map((fileItem) => {
        return fileItem.response.data.path
      })
      data.fileNameArray = uploadFiles.map((fileItem) => {
        return fileItem.response.data.fileName
      })
      form.filePath = JSON.stringify(data.filePathArray)
      form.fileName = JSON.stringify(data.fileNameArray)
    }
    const handleExceed = () => {
      ElMessage({
        message: '最多上传5个附件',
        type: 'wraning',
      })
    }
    const handleError = () => {
      ElMessage({
        message: '上传失败',
        type: 'error',
      })
    }
    const cookie = () => localStorage.getItem('token')
    return {
      data,
      rules,
      process,
      form,
      examineForm,
      headers: {
        Authorization: 'Bearer ' + cookie(),
      },
      previewFile,
      search,
      onSearch,
      getCurrentList,
      handleCurrentChange,
      handleSizeChange,
      hasChoose,
      getExamineParams,
      handleAttachment,
      removeAttachment,
      handleExceed,
      handleError,
    }
  },
})
</script>

<style scoped></style>
